import { useRequest, useSetState } from 'ahooks'
import { useCallback } from 'react'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { Select, DatePicker, Button, Pagination, Result, Spin, Empty } from 'antd'
import { FrontOrganizations } from '../../../../Common/Router/MenuNav/Common/Conversion'
import { Player, BigPlayButton } from 'video-react'
import dayjs from 'dayjs'
import './Scss/VideoPlayList.scss'
import './VideoPlayList.scss'

const defaultValue = {
    organizationUuid: '',
    BeinVideoDate: '',
    EndVideoDate: '',
    pageSize: '6',
    pageIndex: 1,
}

const NumberStyle = {
    1: { width: '100%', height: '100%' },
    2: { width: '50%', height: '100%' },
    3: { width: '50%', height: '50%' },
    4: { width: '50%', height: '50%' },
    5: { width: 'calc((100% / 3) )', height: '50%' },
    6: { width: 'calc((100% / 3) )', height: '50%' },
}

export const VideoPlayList001 = ({ importantPartUuid }) => {
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { total, list } = res

            setVideoTotal(total)
            setVideoList(list)
        },
    })

    const [data, setData] = useSetState(defaultValue)
    const [videoList, setVideoList] = useState([])
    const [videoTotal, setVideoTotal] = useState(0)

    const getData = useCallback(
        data => {
            runAsync({ url: 'getVideos', data: { importantPartUuid, ...data } })
        },
        [importantPartUuid, runAsync],
    )

    useEffect(() => getData(), [getData])
    const [Org, setOrg] = useState([{ value: '', label: '全部' }])
    useEffect(() => {
        const getOrg = async () => {
            const org = await FrontOrganizations()
            const data = Object.keys(org).map(key => ({ value: key, label: org[key] }))
            setOrg([{ value: '', label: '全部' }, ...data])
        }
        getOrg(defaultValue)
    }, [])

    const resetting = () => {
        setData(defaultValue)
        getData(defaultValue)
    }
    const search = () => getData(data)

    return (
        <div className="VideoPlayList001">
            <div className="options">
                <div>
                    <div className="Lable">
                        <div>组织机构 : </div>
                        <Select
                            value={data.organizationUuid}
                            options={Org}
                            style={{ width: 200 }}
                            onChange={e => setData({ organizationUuid: e, pageIndex: 1 })}
                        />
                    </div>
                    <div className="Lable">
                        <div>开始时间 : </div>
                        <DatePicker
                            value={data.BeinVideoDate && dayjs(data.BeinVideoDate)}
                            style={{ width: 200 }}
                            showTime
                            onChange={e => {
                                console.log(e)
                                setData({ BeinVideoDate: dayjs(e).format('YYYY-MM-DD HH:mm:ss'), pageIndex: 1 })
                            }}
                        />
                    </div>
                    <div className="Lable">
                        <div>结束时间 : </div>
                        <DatePicker
                            value={data.EndVideoDate && dayjs(data.EndVideoDate)}
                            style={{ width: 200 }}
                            showTime
                            onChange={e =>
                                setData({ EndVideoDate: dayjs(e).format('YYYY-MM-DD HH:mm:ss'), pageIndex: 1 })
                            }
                        />
                    </div>
                </div>
                <div className="Button">
                    <Button onClick={resetting}>重置</Button>
                    <Button onClick={search}>搜索</Button>
                </div>
            </div>
            <div className="VideoList">
                {videoList.length === 0 ? (
                    <Result title="暂无视频资源" />
                ) : (
                    <div className="List">
                        {videoList.map(({ uuid, tableName, coverAttachment, videoAttachment }) => (
                            <div key={uuid} style={NumberStyle[videoList.length.toString()]}>
                                <Player
                                    fluid={false}
                                    width={'100%'}
                                    height={'100%'}
                                    playsInline
                                    poster={coverAttachment?.fileUrl}
                                    src={videoAttachment?.fileUrl}
                                >
                                    <BigPlayButton position="center" />
                                </Player>
                            </div>
                        ))}
                    </div>
                )}
            </div>
            {videoList.length !== 0 && (
                <div className="Pagination">
                    <Pagination
                        total={videoTotal}
                        showTotal={total => `共${total}条记录 -- 当前第${data.pageIndex}页`}
                        showSizeChanger={false}
                        pageSize={data.pageSize}
                        current={data.pageIndex}
                        onChange={e => setData({ pageIndex: e })}
                    />
                </div>
            )}
        </div>
    )
}

const DefaultArr = [{ label: '全部', value: '' }]
//
export const VideoPlayListA01 = ({ OrgEvent }) => {
    const [List, setList] = useState()

    const [Org, setOrg] = useState('')

    const [YearMonthOptions, setYearMonthOptions] = useState(DefaultArr)

    const NumberOptions = [
        { label: '全部', value: '' },
        { label: '一次', value: 1 },
        { label: '二次', value: 2 },
        { label: '三次', value: 3 },
        { label: '四次', value: 4 },
        { label: '五次', value: 5 },
        { label: '六次', value: 6 },
        { label: '七次', value: 7 },
        { label: '八次', value: 8 },
    ]

    const PageSizeOptions = [
        { label: '一屏', value: 1 },
        { label: '二屏', value: 2 },
        { label: '三屏', value: 3 },
        { label: '四屏', value: 4 },
        { label: '五屏', value: 5 },
        { label: '六屏', value: 6 },
    ]

    const [YearMonth, setYearMonth] = useState('')
    const [Number, setNumber] = useState('')
    const [Total, setTotal] = useState(0)
    const [PageIndex, setPageIndex] = useState(1)
    const [PageSize, setPageSize] = useState(6)

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setTotal(res.total)
            setList(res.list)
            const data = res.videoDatelist.map(({ videoDate: label, videoDate: value }) => ({ label, value }))
            setYearMonthOptions([{ label: '全部', value: '' }, ...data])
        },
    })

    useEffect(() => {
        setYearMonthOptions(DefaultArr)
        setList()
        runAsync({
            url: 'getNongkenGetVideoList',
            data: { OrganizationUuid: Org, YearMonth, Number, PageIndex, PageSize },
        })
    }, [runAsync, Org, YearMonth, Number, PageIndex, PageSize])

    OrgEvent.useSubscription(val => {
        setYearMonth('')
        setOrg(val === '00000000-0000-0000-0000-000000000000' ? '' : val)
    })

    return (
        <div className="VideoPlayListA01">
            <div>
                <div>
                    <div>日期 : </div>
                    <Select options={YearMonthOptions} value={YearMonth} onChange={setYearMonth} />
                </div>
                <div>
                    <div>次数 : </div>
                    <Select options={NumberOptions} value={Number} onChange={setNumber} />
                </div>
                <div>
                    <div>数量 : </div>
                    <Select options={PageSizeOptions} value={PageSize} onChange={setPageSize} />
                </div>
            </div>
            <div>
                {List ? (
                    List.length !== 0 ? (
                        <div className="Box">
                            {List.map(({ uuid, tableName, coverUrl, fileUrl }) => (
                                <div key={uuid} style={NumberStyle[List.length.toString()]}>
                                    <Player
                                        fluid={false}
                                        width={'100%'}
                                        height={'100%'}
                                        playsInline
                                        poster={coverUrl}
                                        src={fileUrl}
                                    >
                                        <BigPlayButton position="center" />
                                    </Player>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <Empty />
                    )
                ) : (
                    <Spin />
                )}
            </div>
            {Total > 0 && List && Total > List.length && (
                <Pagination
                    total={Total}
                    showTotal={total => `共${Total}条记录/当前第${PageIndex}页`}
                    showSizeChanger={false}
                    pageSize={PageSize}
                    current={PageIndex}
                    onChange={e => setPageIndex(e)}
                />
            )}
        </div>
    )
}
